import React from 'react';
import { Box, Flex, Text } from '@chakra-ui/react';
import { FaFire } from 'react-icons/fa';
import { Streak } from '../../types';

interface StreakCounterProps {
  streak: Streak;
}

const StreakCounter: React.FC<StreakCounterProps> = ({ streak }) => {
  return (
    <Box>
      <Flex justifyContent="center" alignItems="center" mb={4}>
        <FaFire size="2em" color="orange" />
        <Text fontSize="3xl" fontWeight="bold" ml={2}>
          {streak.current}
        </Text>
      </Flex>
      <Text textAlign="center" color="gray.500">
        Days in a row
      </Text>
      <Text textAlign="center" fontSize="sm" mt={2}>
        Your best streak: {streak.best} days
      </Text>
    </Box>
  );
};

export default StreakCounter;
